import { View } from "@tarojs/components"
import React, { useState } from "react"
import { AtIcon, AtTabs, AtTabsPane } from "taro-ui"
import { RecoFoodSwiper } from "../../pages/index/components/RecoFoodSwiper"
import { RecoData, TabMenu } from "../../pages/index/models"
import "./index.scss"

interface BaseTabMenuProps {
  loading:boolean;
  data:RecoData[];
  tabList:TabMenu[];
  onTabChange?:(data:TabMenu) => void;
  onClick?:(data:RecoData) => void;
}

export const BaseTabMenu = ({
  data,
  tabList,
  loading,
  onTabChange,
  onClick
}:BaseTabMenuProps) => {
  const [currentIndex,setCurrentIndex] = useState<number>(0);

  const handleClick = (item:RecoData) => {
    onClick?.(item)
  }

  const handleOnClick = (index:number) => {
    setCurrentIndex(index)
    onTabChange?.(tabList[index])
  }
  return (
    <View className='section'>
      <AtTabs current={currentIndex} tabList={tabList} onClick={handleOnClick}>
        <View className='data-container'>
          {
            !loading && tabList.map((tab,index)=>(
              <AtTabsPane key={tab.id} current={currentIndex} index={index}>
                <RecoFoodSwiper data={data} onClick={handleClick} />
              </AtTabsPane>
            ))
          }
        </View>
      </AtTabs>
      {
        loading && (
          <View className='loading'>
            <AtIcon value='loading' size='30' color='#f00' />
          </View>
        )
      }
    </View>
  )
}
